<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>jsonp请求</h1>
  <button>提交请求</button>
  <script>
    //在外面创建一个函数用来获取到响应数据
    //把函数名字以查询字符串的方式告诉后台
    function cb(data) {
      console.log('后台数据', data);
    }

    const oBut = document.querySelector('button')
    //点击事件
    //定义在全局
    let oScript = null
    oBut.onclick = function () {
      //点击时候会发现多次创建scrpit标签 需要进行处理

      if (oScript) {
        //删除某个节点
        oScript.remove()

      }
      //创建script元素
      oScript = document.createElement('script')
      //给元素添加src属性
      /* 
      因为script标签中的src属性可以链接外部服务器 用src属性链接外部的服务器，可以获得服务器响应的数据
      响应数据是在script标签中，所以不能直接获取想要的数据，要用js语句获取，这时候可以用一个函数，把函数的名字
      以查询字符串方式传送给到后台，后台获取到函数名进行一个函数调用，实参就是要响应的数据，前台进行接收
      */
      oScript.src = 'http://127.0.0.1:8100/userJson?callback=cb'
      document.body.appendChild(oScript)
    }
  </script>
</body>

</html>